﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script>
        var a = 1;

        var isMoving = false;
        window.onmousemove = function () {
            if (isMoving) {
                document.getElementById('pl1').setAttributeNS(null, 'points', '0,0 100,50, 150,100 ' + event.x + ',' + event.y);
            }
        }
        window.onmouseup = function () {
            if (isMoving) {
                document.getElementById('pl1').setAttributeNS(null, 'points', '0,0 100,50, 150,100 ' + event.x + ',' + event.y);
                document.getElementById('pl1').setAttributeNS(null, 'marker-end', 'url(#markerArrow)');
                isMoving = false;
            }
        }
        window.onmousedown = function () {
            document.getElementById('pl1').removeAttribute('marker-end');
            document.getElementById('pl1').setAttributeNS(null, 'points', '0,0 100,50, 150,100 ' + event.x + ',' + event.y);
            isMoving = true;

            ////marker-end="url(#markerArrow)"
            //if (a == 1) {
            //    document.getElementById('pl1').removeAttribute('marker-end');
            //    a = 0;
            //} else {
            //    document.getElementById('pl1').setAttributeNS(null, 'marker-end', 'url(#markerArrow)');
            //    a = 1;
            //}

            //document.getElementById('pl1').setAttributeNS(null, 'marker-end', 'url(#markerArrow)');
            ////document.getElementById('pl1').setAttribute('marker-end', '');
            //document.getElementById('pl1').setAttributeNS(null,'points', '0,0 100,50, 150,100 ' + event.x + ',' + event.y);
            //document.getElementById('pl1').setAttribute('marker-end', 'url(#markerArrow)');

            //document.getElementById('p1').setAttribute('d', 'M505,50 c15,-75 30,30 100,0 s50,-50 ' + event.x + ',' + event.y);
        }
    </script>
</head>
<body>
    <svg width="500" height="1000">
        <defs>
            <marker id="markerArrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
                <path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" />
            </marker>
        </defs>
        <polyline id="pl1" marker-end="url(#markerArrow)" fill="none" stroke="red" stroke-width="1" points="225,250 225,260 225,332.5 272,332.5 272,405 272,415" />
        <path id="p1" d="M505,50 c15,-75 30,30 100,0 s50,-50 150,50"
              stroke="brown" stroke-width="5" fill="none"
              marker-end="url(#markerArrow)" />   
    </svg>
</body>
</html>
